<template>
	<view class="relative">
		<view class="bg-white" style="padding: 30rpx 20rpx;">
			<view class="Media Media--center" style="margin-bottom: 30rpx">
				<u-image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/11.png" width="38rpx" height="38rpx" mode="aspectFill"
					style="margin: 0 auto;"></u-image>
				<view class="Media-body text-lg" style="font-weight: bold; padding: 0 20rpx;">多元大语言模型池</view>
			</view>
			<view class="Grid Grid--center Grid--justifyCenter Grid--1of2 text-sm text-white" style="margin-bottom: 20rpx;">
				<view class="Grid-cell" style="padding: 0 12rpx 0 0;">
					<view class="Grid Grid--justifySpaceBetween"
						style="background-color: #0DA25F; border-radius: 30rpx; padding: 12rpx 30rpx;">
						<view>DeepSeek-r1</view>
						<view>正在运行</view>
					</view>
				</view>
				<view class="Grid-cell" style="padding: 0 0 0 12rpx;">
					<view class="Grid Grid--justifySpaceBetween"
						style="background-color: #0DA25F; border-radius: 30rpx; padding: 12rpx 30rpx;">
						<view>ChatGlm-6b</view>
						<view>正在运行</view>
					</view>
				</view>
			</view>
			<view class="Grid Grid--center Grid--justifyCenter Grid--1of2 text-sm text-white">
				<view class="Grid-cell" style="padding: 0 12rpx 0 0;">
					<view class="Grid Grid--justifySpaceBetween"
						style="background-color: #0DA25F; border-radius: 30rpx; padding: 12rpx 30rpx;">
						<view>ChatGpt-3.5</view>
						<view>正在运行</view>
					</view>
				</view>
				<view class="Grid-cell" style="padding: 0 0 0 12rpx;">
					<view class="Grid Grid--justifySpaceBetween"
						style="background-color: #0DA25F; border-radius: 30rpx; padding: 12rpx 30rpx;">
						<view>Baichuan-7b</view>
						<view>正在运行</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="cu-timeline">
				<!-- <view class="cu-time">06-17</view> -->
				<view class="cu-item" v-for="(item, index) in info.time_line" :key="index">
					<view class="content">
						<view class="Grid Grid--center" style="font-weight: bold; color: #000000; margin-bottom: 20rpx;">
							<view class="text-sm">{{item.time}}</view>
							<!-- <view style="padding: 0 20rpx;"></view> -->
						</view>
						<view class="text-xs" v-html="item.content"></view>
					</view>
				</view>
				<!-- <view class="cu-item">
					<view class="content">
						<view class="Grid Grid--center" style="font-weight: bold; color: #000000;">
							<view class="text-sm">2月8号</view>
							<view style="padding: 0 20rpx;">00:59:30</view>
						</view>
						<view class="text-xs">
							A数据分析已完成，请查香详细内容
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Model',
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			info: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			handleClick(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/assets/colorui/icon.css";
	@import "@/assets/colorui/main.css";
	.cu-timeline>.cu-item::before {
		color: #0DA25F !important;
		top: 25px !important;
		content: "" !important;
		background-color: #ffffff !important;
		border-radius: 50% !important;
		border: 5px solid #0DA25F !important;
		width: 5px !important;
		height: 5px !important;
		line-height: 5px !important;
		left: 24px !important;
	}
	.cu-timeline>.cu-item>.content:not([class*="bg-"]) {
		background-color: #ffffff !important;
		color: #666666 !important;
	}
	.cu-timeline>.cu-item[data-v-6c6ead4a] {
		padding: 15rpx 20rpx 20rpx 100rpx !important;
	}
</style>